<!--财务模块-->
<template>
  <div class="finance">
    <el-row>
      <el-col :span="14">
        <!--  收银-->
        <el-col style="box-shadow:rgba(0,0,0,.3) 0px 0px 10px;">
          <div class="headStyle">
            <el-col :span="3">收银</el-col>
            <!-- <el-col :span="3" style="margin-top: -5px;"><el-button @click="moreClick">更多</el-button></el-col> -->
            <el-col :span="1" :offset="20">
              <i class="el-icon-more" />
              <div>
                <el-button @click="moreClick">更多</el-button>
              </div>
            </el-col>
          </div>
          <el-col style="margin:20px;">
            <el-button-group>
              <el-button @click="titleClick('收款')">收款</el-button>
              <el-button @click="titleClick('退款')">退款</el-button>
            </el-button-group>
          </el-col>
          <div v-show="moneyBtn === '收款'" class="headStyle">
            <el-table :data="payment.dto" border :row-class-name="tableColor">
              <el-table-column label="收款单号" prop="dataCode" :show-overflow-tooltip="true" />
              <el-table-column label="顾客" prop="customerName" :show-overflow-tooltip="true" />
              <el-table-column label="业务单类型" prop="paymentType" :show-overflow-tooltip="true" />
              <el-table-column label="业务单号" prop="orderCode" :show-overflow-tooltip="true" />
              <el-table-column label="收款类型" prop="payType" :show-overflow-tooltip="true" />
              <el-table-column label="收款金额" prop="orderAmount" :show-overflow-tooltip="true" />
              <el-table-column label="操作">
                <template slot-scope="{ row }">
                  <el-button type="text" @click="collection(row)">收款</el-button>
                  <el-button type="text" @click="cancelCollection(row)">取消</el-button>
                </template>
              </el-table-column>
            </el-table>
          </div>
          <div v-show="moneyBtn === '退款'" class="headStyle">
            <el-table :data="refund.dto" border :row-class-name="tableColor">
              <el-table-column label="退款单号" prop="refundCode" :show-overflow-tooltip="true" />
              <el-table-column label="顾客" prop="customerName" :show-overflow-tooltip="true" />
              <el-table-column label="业务单类型" prop="businessType" :show-overflow-tooltip="true" />
              <el-table-column label="业务单号" prop="businessCode" :show-overflow-tooltip="true" />
              <el-table-column label="退款金额" prop="refundMoney" :show-overflow-tooltip="true" />
              <el-table-column label="操作">
                <template slot-scope="{ row }">
                  <el-button type="text" @click="collections(row)">退款</el-button>
                </template>
              </el-table-column>
            </el-table>
          </div>
        </el-col>
      </el-col>
    </el-row>
    <CollectionProp :visible.sync="visible" :current-row.sync="currentRow" @close="visible = false;" @success="successHandle" />
    <CollectionProps :visible.sync="visibles" :current-rows.sync="currentRow" @close="visibles = false;" @success="successHandle" />
  </div>
</template>

<script>
import CollectionProp from "@/views/financialCenter/checkstand/collectionProp";
import CollectionProps from "@/views/financialCenter/refund/collectionProp";
import { tableColor } from '@/utils/common.js';
export default {
  components: {
    CollectionProp,
    CollectionProps,
  },
  data() {
    return {
      payment: {},
      refund: {},
      loading: false,
      type: "",
      moneyBtn: "收款",
      visible: false,
      visibles: false,
      currentRow: {},
      tableColor,
    };
  },
  created() {
    this.getPaymentList();
  },
  methods: {
    async getPaymentList() {
      this.loading = true;
      const res = await this.$api['workbench/workbench/paymentList']({});
      this.loading = false;
      if (res.code !== 200) return this.$message.error('查询收款单失败！');
      this.payment = res.data;
    },
    async getRefundList() {
      this.loading = true;
      const res = await this.$api['workbench/workbench/refundList']({});
      this.loading = false;
      if (res.code !== 200) return this.$message.error('查询退款单失败！');
      this.refund = res.data;
    },
    titleClick(title) {
      this.moneyBtn = title;
      if (title === '收款') {
        this.getPaymentList();
      } else {
        this.getRefundList();
      }
    },
    async cancelCollection(row) {
      const confirmResult = await this.$confirm("请确认是否取消?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      }).catch((err) => err);
      if (confirmResult !== "confirm") {
        return this.$message.info("已取消操作");
      }
      const res = await this.$api["financialCenter/checkstand/cancelPayment"]({
        id: row.id,
      });
      if (res.code !== 200) return this.$message.error(res.msg);
      this.$message.success("取消成功");
      this.getPaymentList();
    },
    successHandle() {
      this.visible = false;
      this.visibles = false;
      if (this.moneyBtn === '收款') {
        this.getPaymentList();
      } else {
        this.getRefundList();
      }
    },
    async collection(row) {
      const res = await this.$api[
        "financialCenter/checkstand/getPaymentDateils"
      ]({ id: row.id });
      if (res.code !== 200) return;
      this.currentRow = res.data;
      this.visible = true;
    },
    async collections(row) {
      const res = await this.$api["financialCenter/refund/getRefundDetails"]({
        id: row.id,
      });
      if (res.code !== 200) return;
      this.currentRow = res.data;
      this.visibles = true;
    },
    moreClick() {
      if (this.moneyBtn === '收款') {
        this.$router.push({ path: "/swan/financialCenter/checkstand" });
      } else {
        this.$router.push({ path: "/swan/financialCenter/refund" });
      }
    },
  },
};
</script>

<style lang="scss" scoped>
.headStyle{
  margin-top: 20px;
  padding: 10px;
}
.finance{
  margin-top: 20px;
}
@import '../css/reception.scss'
</style>
